<template>
    <el-col :span="v.data.col || 8" :style="v.data.width ? { width: v.data.width + 'px' } : {}">
        <el-card class="box-card" v-if="v.type === 'video'">
            <template #header>
                <el-row class="card-header" justify="space-between">
                    <div class="d-flex">
                        <el-image style="width: 24px; height: 24px"
                            :src="tuyalist.find(c => c.category === v.value.category)?.icon" />
                        <el-text size="large">{{ v.value?.name }}</el-text>
                    </div>
                    <div class="card-header-right">
                        <el-text class="dian" :class="v.value?.online ? 'bg-success1' : 'bg-info1'"></el-text>
                        <el-text class="badge" :type="v.value?.online ? 'success' : 'info'" size="small">{{
                            v.value?.online ? '在线' : '离线'
                        }}</el-text>
                    </div>
                </el-row>
            </template>
            <div v-if="v.value">
                <iotvideo :actionsallocateemit="actionsallocateemit" :device="v.value" :socket="socket"
                    :home_id="home_id" :width="v.data.width || 400" :height="v.data.height || 313" :v2set="v.data">
                </iotvideo>
            </div>
        </el-card>
        <el-card class="box-card" v-else-if="v.type === 'list'">
            <template #header>
                <el-row class="card-header" justify="space-between">
                    <div class="d-flex">
                        <el-image style="width: 24px; height: 24px"
                            :src="tuyalist.find(c => c.category === v.value.category)?.icon" />
                        {{ v.value.name }}
                    </div>
                    <div class="card-header-right">
                        <el-text class="dian" :class="v.value.online ? 'bg-success1' : 'bg-info1'"></el-text>
                        <el-text class="badge" :type="v.value.online ? 'success' : 'info'" size="small">{{
                            v.value.online ?
                                '在线' : '离线'
                        }}</el-text>
                    </div>
                </el-row>
            </template>
            <devVue :device="v.value" :specifications="specifications" :list="liststate.find(e => e.id === v.value.id)"
                :tuyastate="tuyastate" :v2set="v.data">
            </devVue>
        </el-card>
        <el-card class="box-card" v-else-if="v.type === 'overview'">
            <div class="container-fluid">
                <div class="row">
                    <el-row class="righttop col" :style="v.data.height ? { height: v.data.height + 'px' } : {}">
                        <el-col :span="24" class="righttopbody-1">
                            <el-col :span="10">
                                <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/zhucerenshu.svg"
                                    alt="">

                            </el-col>
                            <el-col :span="14" class="righttoptext">
                                <div class="text-1">设备总数</div>
                                <div class="text-2 ">
                                    <MynumberVue class="colora" :num="list.length"></MynumberVue>
                                    <span class="texta">个</span>

                                </div>
                            </el-col>
                        </el-col>
                        <el-col :span="24" class="righttopbody-1">
                            <el-col :span="10" class="righttopbody-img">
                                <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/denglurenshu.svg"
                                    alt="">

                            </el-col>
                            <el-col :span="14" class="righttoptext">
                                <div class="text-1">在线设备数</div>
                                <div class="text-2 ">
                                    <MynumberVue class="colorb" :num="list.filter(c => c.online).length">
                                    </MynumberVue>
                                    <span class="texta">个</span>

                                </div>
                            </el-col>
                        </el-col>
                        <el-col :span="24" class="righttopbody-1">
                            <el-col :span="10" class="righttopbody-img">
                                <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/pingcerenshu.svg"
                                    alt="">
                            </el-col>
                            <el-col :span="14" class="righttoptext">
                                <div class="text-1">离线设备数</div>
                                <div class="text-2 ">
                                    <MynumberVue class="colorc" :num="list.filter(c => !c.online).length"></MynumberVue>
                                    <span class="texta">个</span>
                                </div>
                            </el-col>
                        </el-col>
                    </el-row>
                    <el-row class="righttop col">
                        <el-col :span="24" class="righttopbody-1">
                            <el-col :span="10">
                                <img width="62" height="55"
                                    src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_jiaoxuechengguo.png"
                                    alt="">

                            </el-col>
                            <el-col :span="14" class="righttoptext">
                                <div class="text-1">设备数据总数</div>
                                <div class="text-2 ">
                                    <MynumberVue class="colora" :num="logcount"></MynumberVue>
                                    <span class="texta">条</span>

                                </div>
                            </el-col>
                        </el-col>
                        <el-col :span="24" class="righttopbody-1">
                            <el-col :span="10" class="righttopbody-img">
                                <img width="62" height="55"
                                    src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_youxiuxuesheng.png"
                                    alt="">

                            </el-col>
                            <el-col :span="14" class="righttoptext">
                                <div class="text-1">平均刷新间隔</div>
                                <div class="text-2 ">
                                    <span class="colorb">2.6</span>
                                    <span class="texta">分钟</span>

                                </div>
                            </el-col>
                        </el-col>
                        <el-col :span="24" class="righttopbody-1">
                            <el-col :span="10" class="righttopbody-img">
                                <img width="62" height="55"
                                    src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_tuanduipaihang.png"
                                    alt="">
                            </el-col>
                            <el-col :span="14" class="righttoptext">
                                <div class="text-1">最近刷新时间</div>
                                <div class="text-2 ">
                                    <span class="colorc">{{ newtime }}</span>
                                </div>
                            </el-col>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>
        <el-card class="box-card" v-else-if="v.type === 'percentage'">
            <template #header>
                <el-row class="card-header">
                    设备日志数
                </el-row>
            </template>
            <div class="bg-line mb-2">
                <areaVue :data="logbydayp4" :height="v.data.height || 324" :chart-cfg="{ padding: [35, 35, 70, 50] }"
                    :charstyle="{ lineJoin: 'round', lineCap: 'round' }"
                    :color="['l(180) 0:#FCF100  1:#F5A300', 'l(180) 0:#FE8B16  1:#F84228']">
                </areaVue>
            </div>
        </el-card>
        <el-card class="box-card" v-if="v.type === 'char'">
            <template #header>
                <el-row class="card-header" justify="space-between">
                    <div class="d-flex">
                        <el-image style="width: 24px; height: 24px"
                            :src="tuyalist.find(c => c.category === v.value.category)?.icon" />
                        <el-text size="large">{{ v.value.name }}({{ statename(v.data.state || [], v.value).join(',')
                            }})</el-text>
                    </div>
                    <div class="card-header-right">
                        <el-text class="dian" :class="v.value.online ? 'bg-success1' : 'bg-info1'"></el-text>
                        <el-text class="badge" :type="v.value.online ? 'success' : 'info'" size="small">{{
                            v.value.online ?
                                '在线' : '离线'
                        }}</el-text>
                    </div>
                </el-row>
            </template>
            <devcharVue :device="v.value" :list="liststate.find(e => e.id === v.value.id)" :tuyastate="tuyastate"
                :v2set="v.data" :specifications="specifications">
            </devcharVue>
        </el-card>
        <el-card class="box-card sciencecenter" v-if="v.type === 'table'">
            <template #header>
                <el-row class="card-header">
                    <div class="d-flex">
                        <el-image style="width: 24px; height: 24px"
                            src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_youxiuxuesheng.png" />
                        <el-text size="large">编程日志</el-text>
                    </div>
                </el-row>
            </template>
            <el-table :data="studentlogtabledata" class="el-table" :height="v.data.height || 270">
                <el-table-column prop="time" label="时间" width="100">
                </el-table-column>
                <el-table-column prop="name" class-name="color1 text-center fw-bold" label="名称" />
                <el-table-column prop="type" class-name="color0" label="类型" />
                <el-table-column class-name="color2 text-center fw-bold" width="150" prop="value" label="设备IP">
                </el-table-column>
            </el-table>
            <template #footer>
                <el-pagination class="el-pagination" :page-size="studentline" :total="studentlogcount"
                    @current-change="r => emit('studentcurrentchange', r)" layout="prev, pager, next"
                    :current-page="Math.floor(studentoffset / studentline) + 1"></el-pagination>
            </template>
        </el-card>
        <el-card class="box-card sciencecenter" v-if="v.type === 'log' && specifications.length">
            <template #header>
                <el-row class="card-header">
                    <div class="d-flex">
                        <el-image style="width: 24px; height: 24px"
                            src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_jiaoxuechengguo.png" />
                        <el-text size="large">设备日志</el-text>
                    </div>
                </el-row>
            </template>
            <el-table :data="logtabledata" class="el-table" :height="v.data.height || 270">
                <el-table-column prop="time" label="时间" width="100">
                </el-table-column>
                <el-table-column prop="name" class-name="color1 text-center fw-bold" label="名称" width="150" />
                <el-table-column prop="type" class-name="color0" label="类型" />
                <el-table-column class-name="color2 text-center fw-bold" prop="value" label="状态">
                    <template #default="scope">
                        <el-text class="color2 text-center fw-bold" truncated> {{ scope.row.value }} </el-text>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-pagination class="el-pagination" :page-size="line" :total="logcount"
                    @current-change="r => emit('currentchange', r)" layout="prev, pager, next"
                    :current-page="Math.floor(offset / line) + 1"></el-pagination>
            </template>
        </el-card>
    </el-col>
</template>

<script setup lang="ts">
import { Socket } from 'socket.io-client';
import { toRefs } from 'vue';
import MynumberVue from "../components/animejs/mynumber.vue";
import TuyaiotModel from '../mysql_interface/tuyaiotmodel';
import areaVue from './components/area.vue';
import devVue from './components/dev.vue';
import devcharVue from './components/devchar.vue';
import iotvideo from './components/iotvideo.vue';
import { DeviceServiceDetailResult, DeviceStatusServiceStatusListResult, Icategory, Ituyalist } from './interface';
const p = defineProps<{
    v: {
        type: string;
        data: TuyaiotModel.ITorganizeSet;
        value: DeviceServiceDetailResult;
    },
    list: DeviceServiceDetailResult[], tuyastateJson: Icategory[], tuyalist: Ituyalist[],
    socket: Socket,
    home_id?: string[],
    liststate: DeviceStatusServiceStatusListResult[],
    logcount: number,
    logbyday: { count: number, day: string }[],
    logbydayp4: { count: number, day: string, type: string }[],
    logtabledata: { time: string, name: string, type: string, value: string }[],
    offset: number,
    line: number,
    studentlogcount: number,
    studentlogtabledata: { time: string, name: string, type: string, value: string }[],
    studentoffset: number,
    studentline: number,
    newtime: string,
    actionsallocateemit: (home_id: string, id: string, isRefresh?: boolean) => void
    specifications: any[], // 设备规格属性：指令集和状态集
}>()
const { list, tuyastateJson: tuyastate, tuyalist, specifications } = toRefs(p)

const emit = defineEmits(['currentchange', 'studentcurrentchange'])

function statename(states: string[], iot: DeviceServiceDetailResult) {
    return states.map(e => {
        let type = tuyastate.value.find(c => c.name === iot.category && c.code === e)
        return type?.dataname
    })

}

console.log("box specifications", p.specifications)

</script>

<style scoped>
.d-flex {
    gap: 8px;
}

.box-card {
    margin-bottom: 8px;
    --el-card-padding: 8px;
    backdrop-filter: blur(5px);
    background-color: #2b2d3c1a;
    color: #fff;
    --el-text-color-regular: #fff;
    --el-card-border-color: rgba(255, 255, 255, 0.25);
}





.el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0);
    --el-table-header-bg-color: rgba(0, 0, 0, 0);
    --el-table-tr-bg-color: rgba(0, 0, 0, 0);
    --el-table-row-hover-bg-color: rgba(0, 0, 0, 0);
    font-size: 13px;
}



.el-pagination {
    --el-pagination-bg-color: rgb(42, 44, 59);
    --el-pagination-button-color: #fff;
}

.card-header-right {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
    align-items: center;
}




.righttop {
    text-align: center;
    padding-right: 0px;
}

.righttoptext {
    text-align: left;
}

.text-1 {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    font-family: 'FZZongYi-M05S';
    height: 32px;
    line-height: 32px;
}

.text-2 {
    line-height: 32px;
}

.colora {
    background: linear-gradient(315deg, #0670F8 0%, #34C7FC 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 22px;
    color: transparent;
    display: inline-block;
    font-family: Bebas;
    font-weight: 700;

}




.colorb {
    background: linear-gradient(180deg, #FE8B16 0%, #F84228 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 22px;
    color: transparent;
    display: inline-block;
    font-family: Bebas;
    font-weight: 700;
}

.colorc {
    background: linear-gradient(180deg, #FCF100 0%, #F5A300 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 22px;
    color: transparent;
    display: inline-block;
    font-family: Bebas;
    font-weight: 700;

}

.texta {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    margin-left: 6px;

}



.righttopbody-1 {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.righttopbody-img {
    padding-top: 8px;
}

/* .badge {} */
</style>
